<template>
  <div class="app-container">
    <!--查询条件开始-->
    <el-card>
      <el-form size="small" :inline="true">
        <el-form-item label="过滤条件">
          <el-input
            v-model="keywords"
            placeholder="请输入过滤条件"
            clearable
          />
        </el-form-item>
      </el-form>
    </el-card>
    <!--查询条件结束-->
    <el-card style="margin-top: 3px">
      <!--工具条开始-->
      <div style="margin-bottom: 3px">
        <el-button type="primary" icon="el-icon-plus" @click="toAdd(undefined)">新增</el-button>
      </div>
      <!--工具条结束-->
      <!--表格数据开始-->
      <el-table
        :data="tableTree"
        row-key="deptId"
        :loading="loading"
        :expand-row-keys="expandRow"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="deptName" label="部门名称" :show-overflow-tooltip="true" width="200px"></el-table-column>
        <el-table-column prop="orderNum" label="排序码" align="center"></el-table-column>
        <el-table-column prop="leaderName" label="负责人" align="center"></el-table-column>
        <el-table-column prop="phone" label="负责电话" align="center"></el-table-column>
        <el-table-column prop="email" label="负责邮箱" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="{row}">
            <dict-tag :data-list="statusOptions" :value="row.status"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-dropdown>
                    <span class="el-dropdown-link">
                      <el-link icon="el-icon-s-operation" type="primary">操作<i
                        class="el-icon-arrow-down el-icon--right"></i></el-link>
                    </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="text" icon="el-icon-edit" @click="toUpdate(row)">修改</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="text" icon="el-icon-plus" @click="toAdd(row)">添加</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="text" icon="el-icon-delete" @click="doDelete(row)">删除</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!--表格数据结束-->
    </el-card>

    <!--添加部门弹出层开始-->
    <el-dialog :title="title" center width="60%" :visible.sync="addDialog" v-if="addDialog">
      <sys-dept-add :active-obj="activeObj" @after="loadAllDept" @close="closeDialog"></sys-dept-add>
    </el-dialog>
    <!--添加部门弹出层结束-->

    <!--修改部门弹出层开始-->
    <el-dialog :title="title" center width="60%" :visible.sync="updateDialog" v-if="updateDialog">
      <sys-dept-update :active-obj="activeObj" @after="loadAllDept" @close="closeDialog"></sys-dept-update>
    </el-dialog>
    <!--修改部门弹出层结束-->
  </div>
</template>

<script>
import sysDeptApi from "@/api/system/sysDept";
import sysDeptAdd from './sys-dept-add'
import sysDeptUpdate from './sys-dept-update'

export default {
  name: "sys-dept-list",
  components: {
    sysDeptAdd,
    sysDeptUpdate
  },
  data() {
    return {
      //展开的数据行
      expandRow: [],
      //过滤条件
      keywords: undefined,
      //加载中的遮罩
      loading: false,
      //部门数据
      deptList: [],
      //状态字典数据
      statusOptions: [],
      //弹出层的标题
      title: "",
      //是否打开添加的弹出层
      addDialog: false,
      //是否打开修改的弹出层
      updateDialog: false,
      //当前行的数据
      activeObj: undefined
    }
  },
  created() {
    this.getDataByType("sys_status_type").then(res => {
      this.statusOptions = res.data;
    })
    this.loadAllDept()
  },
  computed: {
    tableTree: function () {
      let searchValue = this.keywords;
      if (searchValue) {
        let treeData = this.deptList
        let handleTreeData = this.handleTreeData(treeData, searchValue)
        this.setExpandRow(handleTreeData)
        this.expandRow = this.expandRow.join(",").split(",")
        return handleTreeData
      }
      return this.deptList
    }
  },
  methods: {
    //加载部门数据
    loadAllDept() {
      this.loading = true;
      sysDeptApi.listDept().then(res => {
        this.deptList = res.data;
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    //添加
    toAdd(row) {
      this.activeObj = row;
      this.addDialog = true;
      this.title = "添加部门"
    },
    //修改
    toUpdate(row) {
      this.updateDialog = true;
      this.title = `修改【${row.deptName}】部门`
      this.activeObj = row
    },
    //删除
    doDelete(row) {
      this.$confirm(`此操作会删除【${row.deptName}】部门数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysDeptApi.deleteById(row.deptId).then(res => {
          this.$message.success('删除成功!');
          this.loadAllDept();
        })
      }).catch(() => {
        this.$message.info('已取消删除!');
      });
    },
    //关闭所有弹出层
    closeDialog() {
      this.addDialog = false
      this.updateDialog = false
    },
    //  树形表格过滤
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
        return [];
      }
      const array = [];
      for (let i = 0; i < treeData.length; i += 1) {
        let match = false;
        for (let pro in treeData[i]) {
          if (typeof (treeData[i][pro]) == 'string') {
            match |= treeData[i][pro].includes(searchValue);
            if (match) break;
          }
        }
        if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match) {
          array.push({
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue),
          });
        }
      }
      return array;
    },
    // 将过滤好的树形数据展开
    setExpandRow(handleTreeData) {
      if (handleTreeData.length) {
        for (let i of handleTreeData) {
          this.expandRow.push(i.deptId)
          if (i.children.length) {
            this.setExpandRow(i.children)
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
